<template>
  <div class="myStars">
    <mt-spinner v-show="loading" style="margin: 0 auto;" color="#e72e0d" type="double-bounce"></mt-spinner>
    <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
      <li @click="linkTo(item)" class="myStars-li" v-for="(item, index) in articleData" :key="index">
        <div class="li-content">
          <span :id="'myStars-li-'+index" class="cur-overflow" style="-webkit-line-clamp: 2;
-webkit-box-orient: vertical;">{{item.title||'title'}}</span>
          <!-- <span v-if="item.title.length>48" class="ellipsis">...</span> -->
        </div>
        <div class="li-bottom">
          <span>{{item.siteName}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
          <span>{{item.createTime | parseTime('{y}-{m}-{d}')}}</span>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import * as api from '@/service/api'
export default {
  title: '我的收藏',
  data () {
    return {
      loading: false,
      pageSize: 10,
      pageNum: 1,
      total: 0,
      articleData: []
    }
  },
  created () {
    this.getArticleList()
  },
  methods: {
    async getArticleList (page) {
      try {
        this.loading = true
        if (!page) {
          page = this.pageNum
        }
        let res = await api.getArticleList({
          userId: this.$store.state.me.user.userId,
          pageNum: page || this.pageNum,
          pageSize: this.pageSize
        })
        this.articleData = this.articleData.concat(res.data.list)
        this.total = res.data.total
        this.pageNum = page
        this.loading = false
      } catch (e) {
        console.log(e)
        this.loading = false
      }
    },
    linkTo (item) {
      window.location.href = item.url
    },
    loadMore () {
      if (!this.loading && this.total > this.articleData.length) {
        this.loading = true
        let curPage = ++this.pageNum
        this.getArticleList(curPage)
      }
    }
  }
}
</script>
<style lang="scss">
.myStars {
  min-height: 100%;
  padding: 0 30px;
  background-color: $white;
  &-li {
    padding: 24px 0;
    border-bottom: 1px solid $border-color;
    .li-content {
      position: relative;
      font-size: 28px;
      color: $text-color;
      font-weight: 500;
      line-height: 40px;
      max-height: 80px;
      overflow: hidden;
      .ellipsis {
        position: absolute;
        right: 0;
        bottom: 1px;
        background: #fff;
        padding: 0 12px 6px;
      }
    }
    .li-bottom {
      color: #999;
      font-size: 22px;
      padding-top: 18px;
    }
  }
}
</style>
